<template>
	<view class="product-list-page">
		<!-- 顶部品牌banner -->


		<view class="brand-banner">
			<image class="banner-img" src="https://ltmysh.com/h5/resources/banner1.png" mode="widthFix" />

		</view>


<!-- <view class="rf-search">
		<view class="search-box">
			<mSearch
				class="mSearch-input-box"
				:mode="2"
				button="inside"
				:placeholder="hotSearchDefault || '请输入关键字'"
				@search="doSearch(false)"
				@confirm="doSearch(false)"
				v-model="keyword"
			></mSearch>
		</view>
	</view> -->
		<!-- 商品卡片列表 -->
		<view class="product-list">
			<view class="product-card" v-for="(item,index) in dataList" :key="index" 			@tap.stop="navTo(`/pages/product/product?id=${item.id}`)" >
				<image :src="item.picture" class="product-detail-img" mode="contain" />
				<view class="product-detail-info">
					<view class="product-detail-content">
						<view class="product-detail-title">{{ item.name }}</view>
						<view class="product-detail-subtitle">{{ item.sketch }}</view>
						<view class="product-detail-price">
							<text class="price">￥{{ item.price }}</text>
							<text class="unit">/{{ item.unit }}</text>
						</view>
						<view class="product-detail-desc">{{ item.keywords }}</view>
					</view>

					<view class="product-detail-btn" @tap.stop="navTo(`/pages/product/product?id=${item.id}`)">
						:: 查看详情 ::
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import mSearch from '@/components/rf-search/rf-search';
	import {
		indexList,
		productList,
		productDetail
	} from '@/api/product';
	import rfSwipeDot from '@/components/rf-swipe-dot';
	import rfFloorIndex from '@/components/rf-floor-index';
	import rfSearchBar from '@/components/rf-search-bar';
	import rfSwiperSlide from '@/components/rf-swiper-slide';
	import rfProductList from '@/components/rf-product-list';
	import listCell from '@/components/rf-list-cell';
	import { mapMutations } from 'vuex';
	export default {
		components: {
mSearch,
			rfFloorIndex,
			rfSwipeDot,
			rfProductList,
			rfSearchBar,
			listCell,
			rfSwiperSlide
		},
		data() {
			return {
					hotSearchDefault: '',
				scrollTop: 0,
				activeIndex: 0,
				page: 1,
				price: "",
				loading: true,
				dataList: [],
				userInfo: {
					// 用户信息
					promoter: null // 分销商信息
				},
				categoryList: [
					{ label: '产品' },
					{ label: '分类' },
					{ label: '属性' }
				],
				selectedCategoryIndex: 0,
				searchValue: ''
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			// 初始化购物车数量
			this.setCartNum(uni.getStorageSync('cartNum'));
			this.initData();
		},
		computed: {
			// list() {
			// 	let arr = [{
			// 				img: this.activeIndex == 0 ? require("../../static/blessing/wenchuang/1.png") : require(
			// 					"../../static/blessing/wenchuang/a1.png"),
			// 				name: '全部商品',
			// 				type: "",
			// 			  param: {}
			// 	}, {
			// 				img: this.activeIndex == 1 ? require("../../static/blessing/wenchuang/2.png") : require(
			// 					"../../static/blessing/wenchuang/a2.png"),
			// 				name: '兑换量从高到低',
			// 				type: "sales",
			// 				param: { total_sales: 'desc' }
			// 	}, {
			// 				img: this.activeIndex == 2 ? require("../../static/blessing/wenchuang/3.png") : require(
			// 					"../../static/blessing/wenchuang/a3.png"),
			// 				name: '积分从高到低',
			// 				type: "price_desc",
			// 				param: { price: 'desc' }
			// 	}, {
			// 				img: this.activeIndex == 3 ? require("../../static/blessing/wenchuang/4.png") : require(
			// 					"../../static/blessing/wenchuang/a4.png"),
			// 				name: '积分从低到高',
			// 				type: "price_asc",
			// 				param: { price: 'asc' }
			// 	}]
			// 	return arr
			// },
			statusBar () {
				const e = uni.getSystemInfoSync();
				return e.statusBarHeight;
			},
			// 计算倒计时时间
			second() {
				return function(val) {
					return Math.floor(15 * 60 - (new Date() / 1000 - val));
				};
			},
			bottom () {
				let bottom = 0;
				/*  #ifdef H5  */
				bottom = 90;
				/*  #endif */
				return bottom;
			}
		},
		onShareAppMessage() {
			let shareParams = { title: this.share.share_title || `欢迎来到${this.appName}`, path: '/pages/index/index' };
			return shareParams;
		},
		filters: {
			filterDiscountPrice(val) {
				const price = val.product && (val.product.price * val.discount) / 100;
				switch (val.decimal_reservation_number) {
					case 0:
						return (Math.floor(price * 100) / 100).toFixed(2);
					case 1:
						return (Math.floor(price * 100) / 100).toFixed(0);
					case 2:
						return (Math.floor(price * 100) / 100).toFixed(1);
					default:
						return (Math.floor(price * 100) / 100).toFixed(2);
				}
			},
			filterTotalSales(val) {
				if (val > 10000) {
					val = `${(val / 10000).toFixed(2)}w`;
				}
				return val;
			}
		},

		mounted() {
			this.getProductList()
		},

		onReachBottom(e) {

			this.page += 1
			this.getProductList()
		},
		onPageScroll(e) {


		},
		methods: {
			...mapMutations(['setCartNum']),
			navTo(route) {
					this.$mRouter.push({ route });
				},
			jumpFun(item) {
				uni.navigateTo({
					url: item,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			changeBg(item, index) {
				console.log(item, index)
				this.activeIndex = index

				this.page = 1

	       this.page = 1;
			  this.dataList = [];
			  this.loading = true;
			  this.productParams =item.param


				this.getProductList()

			},
			// 获取商品列表
			async getProductList(type) {
				let that = this
				that.loading = true;
				this.price = type


// 				total_sales=desc&page=1
// price=desc

				await this.$http
					.get(`${productList}`, {
						...this.productParams,
						page: this.page
					})
					.then(async r => {
						that.loading = false;
						r.data.forEach((item)=> {
							that.dataList.push(item)
						})

						// if (type === 'refresh') {
						// 	uni.stopPullDownRefresh();
						// }
						// this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						// this.productList = [...this.productList, ...r.data];
					})
					.catch(err => {
						// this.errorInfo = err;
						this.loading = false;
						// if (type === 'refresh') {
						// 	uni.stopPullDownRefresh();
						// }
					});
			},

			// 顶部tab点击
			tabClick({ id }) {
				this.currentCate = id;
				if (id === 0) return;
				this.loading = true;
				this.page = 1;
				this.productLoading = true;
				this.categoryProductList = [];
				this.getProductList(id);
			},

			// 监听轮播图切换
			handleDotChange(e) {
				this.current = e.detail.current;
			},
			// 数据初始化
			initData() {
				// 设置购物车数量角标
				this.getIndexList();
				this.initCartItemCount();
			},
			// 设置购物车数量角标
			async initCartItemCount() {
				if (
					this.$mStore.getters.hasLogin &&
					parseInt(uni.getStorageSync('cartNum'), 10) > 0
				) {
					uni.setTabBarBadge({
						index: this.$mConstDataConfig.cartIndex,
						text: uni.getStorageSync('cartNum').toString()
					});
				} else {
					uni.removeStorageSync('cartNum');
					uni.removeTabBarBadge({ index: this.$mConstDataConfig.cartIndex });
				}
			},
			// 通用跳转
			navTo(route) {
				this.$mRouter.push({ route });
			},
			// 跳转至分类模块
			navToCategory(id) {
				if (this.$mSettingConfig.appCateType === '2') {
					uni.setStorageSync('indexToCateId', id);
					this.$mRouter.reLaunch({ route: '/pages/category/category' });
				} else {
					this.navTo(`/pages/product/list?cate_id=${id}`);
				}
			},
			// 通用跳转
			navToSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
			// 跳至广告图指定页面
			indexTopToDetailPage(item) {
				this.$mHelper.handleBannerNavTo(item.jump_type, item.jump_link, item.id);
			},
			// 获取主页数据
			async getIndexList(type) {
				await this.$http
					.get(`${indexList}`, {})
					.then(async r => {
						uni.setNavigationBarTitle({ title: this.appName });
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						// 首页参数赋值
						this.initIndexData(r.data);
						this.loading = false;
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			// 首页参数赋值
			initIndexData(data) {
				this.announceList = data.announce;
				this.productCateList = data.cate;
				this.categoryList = [{ id: 0, title: '首页' }, ...this.productCateList];
				this.carouselList = data.adv;
				this.search = data.search;
				this.share = data.share;
				uni.setStorageSync('search', this.search);
				this.hotSearchDefault = data.search.hot_search_default || '请输入关键字';
				uni.setStorage({
					key: 'hotSearchDefault',
					data: data.search.hot_search_default
				});
				this.hotProductList = data.product_hot;
				this.recommendProductList = data.product_recommend;
				this.guessYouLikeProductList = data.guess_you_like;
				this.newProductList = data.product_new;
				this.config = data.config;
				this.$mHelper.handleWxH5Share(this.share.share_title || this.appName, this.share.share_desc || `欢迎来到${this.appName}商城`, this.share.share_link || this.$mConfig.hostUrl, this.share.share_cover || this.$mSettingConfig.appLogo);
			},


			// 跳转至分类页
			toCategory() {
				this.$mRouter.switchTab({ route: '/pages/category/category' });
			},
			onCategoryChange(e) {
				this.selectedCategoryIndex = e.detail.value;
			}
		}
	};
</script>

<style scoped lang="scss">
.product-list-page {
	min-height: 100vh;
	background: #fff;
	padding-bottom: 80px;
	.brand-banner {
		position: relative;
		width: 100%;
		.banner-img {
			width: 100%;
			border-radius: 0 0 24px 24px;
			box-shadow: 0 2px 8px #e5d6c6;
		}
	}
	.product-list {
		margin: 32px 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.product-card {
			display: flex;
			align-items: stretch;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 2px 12px #f0e7e0;
			padding: 32px 24px;
			margin: 32px auto;
			width: 100%;
			max-width: 900px;
			box-sizing: border-box;
			height: 580rpx;
		}

		.product-detail-img {
			width: 50%;
			height: auto;
			aspect-ratio: 13/17;
			border-radius: 12px;
			object-fit: contain;
			box-shadow: 0 2px 8px #e5d6c6;
			background: #fff;
			flex-shrink: 0;
			display: block;

		}

		.product-detail-info {
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding-left: 26rpx;

			.product-detail-content {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}

			.product-detail-title {
				font-size: 42rpx;
				color: #bfa16b;
				font-weight:normal;
				// margin-bottom: 8px;
			}

			.product-detail-subtitle {
				font-size: 18px;
				color: #6B4B3A;
				// margin-bottom: 8px;
			}

			.product-detail-price {
				font-size: 22px;
				color: #ff3a2b;
				font-weight: bold;
				// margin-bottom: 12px;
				.unit {
					font-size: 16px;
					color: #ff3a2b;
					margin-left: 2px;
				}
			}

			.product-detail-desc {
				margin: 12rpx 0 12rpx 0;
				color: #888;
				font-size: 16px;
				line-height: 1.6;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				white-space: normal;
			}

			.product-detail-btn {
				width: 100%;
				padding: 10rpx 0;
				text-align: center;
				color: #bfa16b;
				border: 1px solid #bfa16b;
				border-radius: 8px;
				background: #f9f6f2;
				font-size: 18px;
				letter-spacing: 2px;
				margin-left: 0;
				margin-right: auto;
			}
		}
	}
}
</style>

<style lang="scss">
.rf-search {
	.search-box {
		width: 100%;
		background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;

		.mSearch-input-box {
			width: 100%;
		}

		.input-box > input {
			width: 100%;
			height: 60upx;
			font-size: 32upx;
			border: 0;
			border-radius: 60upx;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 0 3%;
			margin: 0;
			background-color: #ffffff;
		}
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);

		.keyword-list-box {
			height: calc(100vh - 110upx);
			padding-top: 10upx;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
		}

		.keyword-entry {
			width: 94%;
			height: 80upx;
			margin: 0 3%;
			font-size: 30upx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1upx #e7e7e7;

			image {
				width: 60upx;
				height: 60upx;
			}

			.keyword-text {
				width: 90%;
			}

			.keyword-img {
				width: 10%;
				justify-content: center;
			}
		}

		.keyword-box {
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;

			.keyword-block {
				padding: 10upx 0;

				.keyword-list-header {
					width: 100vw;
					padding: 10upx 3%;
					font-size: 27upx;
					color: #333;
					display: flex;
					justify-content: space-between;

					image {
						width: 40upx;
						height: 40upx;
					}
				}

				.keyword {
					width: 100vw;
					padding: 3px 3%;
					display: flex;
					flex-flow: wrap;
					justify-content: flex-start;
				}

				.hide-hot-tis {
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #6b6b6b;
				}

				.keyword > view {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60upx;
					padding: 0 20upx;
					margin: 10upx 20upx 10upx 0;
					height: 60upx;
					font-size: 28upx;
					background-color: rgb(242, 242, 242);
					color: #6b6b6b;
				}
			}
		}
	}

	.iconfont {
		font-size: $font-lg + 12upx;
	}
}
</style>
